import React from 'react';
import { Table, Tag, Space, Row, Col, Calendar, Card,Image,Typography,Badge } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import styles from './index.less';

const {Title} = Typography

const index = () => {
  const col1 = () => {
    function onPanelChange(value, mode) {
      console.log(value, mode);
    }
    function getListData(value) {
      let listData;
      switch (value.date()) {
        case 8:
          listData = [
            { type: 'warning', content: 'This is warning event.' },
            { type: 'success', content: 'This is usual event.' },
          ];
          break;
        case 10:
          listData = [
            { type: 'warning', content: 'This is warning event.' },
            { type: 'success', content: 'This is usual event.' },
            { type: 'error', content: 'This is error event.' },
          ];
          break;
        case 15:
          listData = [
            { type: 'warning', content: 'This is warning event' },
            { type: 'success', content: 'This is very long usual event。。....' },
            { type: 'error', content: 'This is error event 1.' },
            { type: 'error', content: 'This is error event 2.' },
            { type: 'error', content: 'This is error event 3.' },
            { type: 'error', content: 'This is error event 4.' },
          ];
          break;
        default:
      }
      return listData || [];
    }
    
    function dateCellRender(value) {
      console.log(value.month())
      const listData = getListData(value);
      return (
        <ul className="events">
          {listData.map(item => (
            <li key={item.content}>
              <Badge status={item.type} text={item.content} />
            </li>
          ))}
        </ul>
      );
    }
    
    function getMonthData(value) {
      if (value.month() === 8) {
        return 1394;
      }
    }
    
    function monthCellRender(value) {
      const num = getMonthData(value);
      return num ? (
        <div className="notes-month">
          <section>{num}</section>
          <span>Backlog number</span>
        </div>
      ) : null;
    }
    return (
      <Row gutter={16}>
        <Col span={12}>
          <div>
            <Row gutter={16}>
              <Col span={10}>
                <Card style={{ width: 300 }}>
                  <Space>
                  <Image
                    width={200}
                    height={100}
                    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                  />
                  名字
                  </Space>
                </Card>
              </Col>
              <Col span={12}>
                <Card style={{ width: 400 }}>
                  <Row gutter={12}>
                    <Col span={12}>
                      <Space direction="vertical">
                        <Title level={3}>今日咨询数目</Title>
                        <Title level={4}>323</Title>
                      </Space>
                      
                    </Col>
                    <Col span={12}>
                    <Space direction="vertical">
                        <Title level={3}>今日咨询时长</Title>
                        <Title level={4}>323</Title>
                      </Space>
                    </Col>
                  </Row>
                </Card>
              </Col>
            </Row>
          </div>
          <div>dsid</div>
        </Col>
        <Col span={12}>
          <Calendar fullscreen={false} dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
        </Col>
      </Row>
    );
  };

  return <PageContainer>{col1()}</PageContainer>;
};

export default index;
